<template>
  <div class="personalmsg">
    <!-- 检索框 -->
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-select v-model="listQuery.condition" style="width:120px;" @change="handleFilter">
              <el-option
                v-for="item in state"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <el-input
              v-model="listQuery.keyword"
              style="width:220px;"
              placeholder="关键词"
              @keyup.enter.native="handleFilter"
            />
            <el-date-picker
              v-model="listQuery.daterange"
              :picker-options="picker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="|"
              start-placeholder="申请开始时间"
              end-placeholder="申请结束时间"
              style="width:300px"
              @change="handleFilter"
            />
            <el-select v-model="listQuery.status" style="width:120px;" @change="handleFilter">
              <el-option
                v-for="item in status"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
    </div>
    <el-table
      :table-label="tableLabel"
      :table-data="tableData"
      style="color:red;font-size:14px !important"
      class="ss"
    >
      <el-table-column slot="first" :min-width="2" label="用户名" align="center" prop="title" style="font-size:14px;">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickTitle(scope.row.userId)">{{ scope.row.nickName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column slot="isEnd" :min-width="2" label="申请时间" align="center" prop="title">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime }}</div>
<!--          <div>{{ scope.row.updateTime }}</div>-->
        </template>
      </el-table-column>
      <el-table-column slot="button" :min-width="3" label="操作" align="center" prop="title">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleCheck(scope.row,'0')">审核</el-button>
          <el-button type="success" @click="handleCheck(scope.row,'1')">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"/>

    <sub-dialog :visiabledialog="visiabledialog" :dialog-data="dialogData.viewUser" @changeVisiable="changeVisiable"/>
    <!-- 用户认证查看 / 用户认证审核-->
    <el-dialog :visible.sync="dialog.addUser" :title="dialogData.addUser.type === '1'? '用户认证查看' : '用户认证审核' " width="580px">
      <el-form :model="dialogData.addUser">
        <el-form-item :label-width="formLabelWidth" label="用户名">
          <el-input :disabled="true" v-model="dialogData.addUser.nickName" style="width:300px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="真实姓名">
          <el-input :disabled="true" v-model="dialogData.addUser.trueName" style="width:300px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="身份证号码">
          <el-input :disabled="true" v-model="dialogData.addUser.idCard" style="width:300px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="身份证正面照">
          <div class="idImg">
            <img :src="dialogData.addUser.faceImg" alt="正面照">
          </div>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="身份证反面照">
          <div class="idImg">
            <img :src="dialogData.addUser.backImg" alt="反面照">
          </div>
        </el-form-item>
        <el-form-item v-if="dialogData.addUser.type !== '1'" :label-width="formLabelWidth" label="驳回理由">
          <el-input :rows="4" v-model="dialogData.addUser.note" type="textarea" style="width:320px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="dialogData.addUser.type === '1'" @click="dialog.addUser = false;dialogData.addUser={}">关 闭</el-button>
        <template v-if="dialogData.addUser.type !== '1'">
          <el-button type="text" @click="dialog.addUser = false;dialogData.addUser={}">取 消</el-button>
          <el-button type="danger" @click="updateAudit('rejected')">审核驳回</el-button>
          <el-button type="success" @click="updateAudit('adopt')">审核通过</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import SubDialog from '@/components/Dialog' // 个人信息弹窗
  import ElTable from '@/components/Eltable'
  import Pagination from '@/components/Pagination' // 分页组件
  import {scrollTo} from '@/utils/scrollTo' // 上下滑动组件
  import {getEduxcloudUserApprovalPager, getEduxcloudUserById, updateAuditInfo} from '@/api/user/user'
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      ElTable,
      Pagination,
      scrollTo,
      SubDialog
    },
    data() {
      return {
        visiabledialog: false,
        dialogData: {
          addUser: {},
          viewUser: {}
        },
        dialog: {
          addUser: false
        },
        formLabelWidth: '120px',
        listQuery: {
          condition: 'nickName',
          status: 'approving',
          keyword: '',
          daterange: [],
          page: 1,
          limit: 20
        },
        status: [
          {
            label: '审核中',
            value: 'approving'
          },
          {
            label: '审核通过',
            value: 'approved'
          },
          {
            label: '审核驳回',
            value: 'approve_fail'
          }
        ],
        state: [
          {
            label: '用户名',
            value: 'nickName'
          },
          {
            label: '邮箱',
            value: 'email'
          },
          {
            label: '真实姓名',
            value: 'trueName'
          },
          {
            label: '身份证号码',
            value: 'idCard'
          }
        ],
        picker: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        },
        total: 0,
        tableLabel: [
          {
            label: 'ID',
            width: '1',
            prop: 'id'
          },
          {
            label: '真实姓名',
            width: '1',
            prop: 'trueName'
          },
          {
            label: '身份证号码',
            width: '2',
            prop: 'idCard'
          },
          {
            label: '邮件',
            width: '2',
            prop: 'email'
          },
          {
            label: '状态',
            width: '1',
            prop: 'status'
          }
        ],
        tableData: []
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      // dialog子组件触发的函数
      changeVisiable(val) {
        this.visiabledialog = Boolean(val)
      },
      // 查看按钮
      handleClickTitle(id) {
        this.visiabledialog = true
        getEduxcloudUserById(id).then(response => {
          this.dialogData.viewUser = response.data.eduxcloudUser
        })
      },
      handleCheck(row, val) {
        this.dialog.addUser = true
        this.dialogData.addUser = Object.assign({}, row)
        this.dialogData.addUser.type = val
      },
      updateAudit(val) {
        const params = {}
        let explain = ''
        if (val === 'adopt') {
          params.status = 'approved'
          explain = '审核通过'
        } else if (val === 'rejected') {
          params.status = 'approve_fail'
          params.note = this.dialogData.addUser.note
          explain = '审核驳回'
        }
        params.id = this.dialogData.addUser.id
        updateAuditInfo(params).then(() => {
          this.dialog.addUser = false
          this.dialogData.addUser = {}
          this.$notify({
            title: '成功',
            message: `${explain}`,
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
      },
      handleClickPush(name) {
        // this.$router.push('toUrl')// 路由跳转
        // window.location.href = 'http://www.baidu.com'// 浏览器跳转
        this.$message(`${name}的个人主页`)
      },
      handleSizeChange(val) {
        this.listQuery.page = 1
        this.listQuery.limit = val.value
        this.getData()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val.value
        this.getData()
      },
      // 筛选
      handleFilter() {
        this.getData()
      },
      clearParams() {
        this.listQuery.daterange = []
        this.listQuery.condition = 'nickName'
        this.listQuery.status = 'approving'
        this.listQuery.keyword = ''
        this.getData()
      },
      // 接口获取数据
      getData() {
        const EduxcloudUserApprovalVo = {}
        if (this.listQuery.daterange !== undefined && this.listQuery.daterange != null) {
          EduxcloudUserApprovalVo.startDate = this.listQuery.daterange[0]
          EduxcloudUserApprovalVo.endDate = this.listQuery.daterange[1]
        }
        EduxcloudUserApprovalVo.condition = this.listQuery.condition
        EduxcloudUserApprovalVo.status = this.listQuery.status
        EduxcloudUserApprovalVo.keyword = this.listQuery.keyword
        EduxcloudUserApprovalVo.page = this.listQuery.page
        EduxcloudUserApprovalVo.limit = this.listQuery.limit
        EduxcloudUserApprovalVo.tenantId = getTenantId()
        console.log('我的承租户:' + getTenantId())
        getEduxcloudUserApprovalPager(EduxcloudUserApprovalVo).then(response => {
          this.tableData = response.data.items

          this.tableData.map(item => {
            if (item.status === 'approving') item.status = '审核中';
            if (item.status === 'approved') item.status = '审核通过';
            if (item.status === 'approve_fail') item.status = '审核驳回';
          })
          this.total = response.data.total
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .personalmsg {
    padding: 14px 20px 0 20px;

    .allsearch {
      margin-top: 0;
      padding: 0;

      .search-content {
        width: 100%;
      }
    }

    .el-dialog {
      border-radius: 6px;
    }

    .idImg {
      width: 300px;
      height: 200px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  /deep/ .el-table {
    font-size: 14px !important;
  }
</style>
